<template><!--该界面为运行测试界面-->
	<div>
		<el-breadcrumb separator="/"> <!--面包屑 -->
      <el-breadcrumb-item><i class="el-icon-s-home" style="margin-right: 15px;font-size: 16px"></i>运行试验</el-breadcrumb-item>
    </el-breadcrumb>
		<div class="info">
			<el-card shadow="always">
				<el-table v-loading="dataLoading" :data="runningTestData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
					<el-table-column type="index" label="#" :index = '(index) =>{return (index + 1) + (currentPage - 1) * pagesize}' width="70" align="center"></el-table-column>
					<el-table-column prop="planName" label="测试方案"></el-table-column>
					<el-table-column prop="beginTime" label="开始时间" width="220"></el-table-column>
					<el-table-column prop="duration" label="运行时长" width="150">
						<template slot-scope="props"><div>{{props.row.duration}}min</div></template>
					</el-table-column>
					<el-table-column prop="discharge" label="报警" align="center" width="150"></el-table-column>
					<el-table-column label="进度" align="center">
						<template slot-scope="scope">
							<el-progress :percentage="scope.row.progress" :show-text="false"></el-progress>
						</template>
					</el-table-column>
					<el-table-column prop="result" label="操作" align="center" width="150">
						<template slot-scope="scope">
              <el-button type="text" class="global_add" @click="toTestPlanRunning(scope.$index, scope.row)" :disabled="btnList.see">查看</el-button>
            </template>
					</el-table-column>
				</el-table>
				<el-pagination class="pagination" background :hide-on-single-page="showPagination" :current-page.sync="currentPage" @size-change="handleSizeChange" :page-size="pagesize" layout="prev, pager, next" :total="runningTestData.length"></el-pagination>
			</el-card>
		</div>
	</div>
</template>
<script>
import moment from 'moment';
import sessionStorage from '../../public/storage.js';
import roleBtn from '../../public/means'
export default {
	data() {
			return {
				runningTestData:[],
				showPagination: true,
				currentPage: 1,
				pagesize: 10,
				dataLoading: false,
				btnList: {
					see: false
				},
				menu_id: 20,
			};
	},
	methods: {
		handleSizeChange(val) {
      this.pagesize=val;
		},
		//获得测试实例列表
		async getRunningTestInstance(){
			this.dataLoading = true;
			const ret = await this.$http.get("/runningTest/getRunningInstanceList");
			this.runningTestData = ret.result;
			this.dataLoading = false;
		},
		//每隔1分钟调一次接口
		async refreshData(){
			let timer = setInterval(() => {
  			setTimeout(() => {
					this.getRunningTestInstance()
				},0)
			},60000);
			this.$once('hook:beforeDestroy', () => {
				clearInterval(timer)
			})
		},
		toTestPlanRunning(index,row){
			this.$router.push({
				path:'/TestPlanRunning',
				query: {
					update: 0,
					oldTestNumber: row.testNumber,
					'planName': row.planName,
					'sign': 'runningTest',
					'beginTime': row.beginTime,
					'alarmCout': row.discharge,
					'duration': row.duration,
					'schedule': row.progress,
					'instanceId': row.instanceId,
					'planId': row.planId,
					'runningStatus': row.status,
					'testNumber': row.testNumber
				}
			});
		}
	},
	mounted() {
		this.getRunningTestInstance();
		this.refreshData();
	},
	async created() {
    const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
      if(role_id){
      // 获取按钮权限状态
      let arr = await roleBtn.roleBtnList(role_id, this.menu_id)
      this.btnList = arr
    }
  }
};
</script>
<style lang="scss" scoped>
@import "./RunningTest.scss";
</style>
